<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录，请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg"  width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">
        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="initVerifyCodeImg()" style="display: none">
            <input id="verifyCode" style="display: none">
            <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="getPath()">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script>
    var u;
    //获取地址栏参数
    var seckillId = getQueryString('seckillId');
    var uuid;
    //发送异步请求到内部服务器中，获取当前的vo对象数据，然后渲染页面
    $.ajax({
        url:"http://localhost:9000/seckill/seckillGood/goodDetail?seckillId="+seckillId,
        type:"get",
        xhrFields: { withCredentials: true },
        success:function (data) {
            if(data.code==200){
                $('#goodName').html(data.data.goodName);
                $('#goodImg').prop("src",data.data.goodImg);
                $('#startDate').html(data.data.startDate);
                $('#goodPrice').html(data.data.goodPrice);
                $('#seckillPrice').html(data.data.seckillPrice);
                $('#stockCount').html(data.data.stockCount);

                //渲染秒杀时间状态
                seckillGoodsStatus(data.data.startDate,data.data.endDate);
            }else{
                layer.msg("错误状态码"+data.code+"错误信息"+data.msg);
            }
        }
    });
    //定时器
    var timer;
    //当前时间与秒杀开始时间之差
    var timeDiffStart;
    //当前时间与秒杀结束之间之差
    var timeDiffEnd;

    function seckillGoodsStatus(startDate,endDate) {
        //获取当前时间
        var now = new Date();
        //将时间转化为毫秒数
        var timeNow = now.getTime();
        var date1 = new Date(startDate);
        var date2 = new Date(endDate);
        var timeStart = date1.getTime();
        var timeEnd = date2.getTime();
        //当前时间与秒杀开始时间之差
        timeDiffStart = parseInt((timeNow - timeStart)/1000);
        //当前时间与秒杀结束之间之差
        timeDiffEnd = parseInt((timeEnd-timeNow)/1000);
        //将秒杀时间的具体的状态放入setInterval中,每个一秒钟就更新一次状态
        timer = setInterval(timeStatus,1000);
    }

    function timeStatus() {
        timeDiffEnd--;
        timeDiffStart--;
        if(timeDiffStart>0){
            if(timeDiffStart<0){
                //当前时间小于开始时间,则秒杀暂未开始
                $('#seckillTip').html("秒杀暂未开始");
            }else if(timeDiffStart>0&&timeDiffEnd>0){
                //当前时间大于开始时间，并且小于结束时间    渲染成：正在秒杀+秒杀的剩余时间
                $('#seckillTip').html("正在秒杀"+timeDiffEnd);
            }else{
                //当前时间大于结束时间
                $('#seckillTip').html("秒杀结束");
                //停止定时器
                clearInterval(timer);
            }
        }
    }



    //根据用户是否有登录显示不同的信息,发送异步请求，获取当前用户登录的信息
    $.ajax({
        url:"http://localhost:9000/member/queryUser",
        type:"post",
        xhrFields: { withCredentials: true },
        success:function (data) {
            if(data.code==200){
                if(data.data==null){
                    return;
                }else{
                    u=data.data;
                    showUserStatus(u);
                }
            }else{
                layer.msg("错误状态码"+data.code+"错误信息"+data.msg);
            }
        }
    });

    function showUserStatus(u) {
        if(!u){
            $('#userTip').show();
        }else{
            //显示出验证码相关内容
            $("#verifyCodeImg").show();
            $("#verifyCode").show();
            uuid=getUuid(u.id);
            console.log(uuid);
            initVerifyCodeImg();
        }
    }
    //初始化验证码函数
    function initVerifyCodeImg() {
        $("#verifyCodeImg").prop("src","http://localhost:9000/seckill/initVerifyCodeImg?uuid="+uuid+"&time=newDate().getTime()");
    }

    //获取路径，接口防刷
    function getPath() {
        //先判断当前登录用户是否存在
        if(!u){
            return layer.msg("请先登录再进行操作");
        }
        initVerifyCodeImg();
        //若当前登录用户存在，则发送异步请求
        $.ajax({
            url:"http://localhost:9000/seckill/getPath",
            type:"post",
            data:{"uuid":uuid,"verifyCodeResult":$("#verifyCode").val()},
            xhrFields: { withCredentials: true },
            success:function (data) {
                if(data.code==200){
                    // window.location.href="/order_detail.html?orderNo="+data.data;
                    onLogin(data.data);
                    console.log(data.data);
                }else{
                    layer.msg("错误状态码"+data.code+"错误信息"+data.msg);
                }
            }
        })
    }

    //进行秒杀
    function onLogin(path) {
        //先判断当前登录用户是否存在
        if(!u){
            return layer.msg("请先登录再进行操作");
        }
        //若当前登录用户存在，则发送异步请求
        $.ajax({
            url:"http://localhost:9000/seckill/"+path+"/seckillIOrder",
            type:"post",
            data:{"seckillId":seckillId,"uuid":uuid,"path":path},
            xhrFields: { withCredentials: true },
            success:function (data) {
                if(data.code==200){
                    // window.location.href="/order_detail.html?orderNo="+data.data;
                    createScoket(uuid);
                    console.log(data.data);
                }else{
                    layer.msg("错误状态码"+data.code+"错误信息"+data.msg);
                }
            }
        })

    }

</script>
</body>
</html>